<template>
    <newAccountDrawer @refresh="fetchData" />
    <a-table :columns="columns" :data-source="data" style="margin-top: 10px" :loading="load">
        <template #headerCell="{ column }">
            <template v-if="column.key === 'name'">
                <span>
                    <smile-outlined/>
                    用户名
                </span>
            </template>
        </template>

        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'name'">
                <a>
                    {{ record.name }}
                </a>
            </template>
            <template v-else-if="column.key === 'tags'">
                <span>
                    <a-tag
                        v-for="tag in record.tags"
                        :key="tag"
                        :color="tag === '管理员' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
                    >
                        {{ tag.toUpperCase() }}
                    </a-tag>
                </span>
            </template>
            <template v-else-if="column.key === 'action'">
                <span>
                    <a @click="deleteUser(record)">删除</a>
                    <a-spin v-if="record.deleting" /> <!-- 仅显示当前行的删除动画 -->
                    <a-divider type="vertical"/>
                    <edit-user :user-data="record" @refresh="fetchData" />
<!--                    <a class="ant-dropdown-link">-->
<!--                        编辑-->
<!--                        <down-outlined/>-->
<!--                    </a>-->
                </span>
            </template>
        </template>
    </a-table>
</template>

<script>
import { SmileOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
import newAccountDrawer from "@/pages/myhome/dRootPage/menu/Drawer/newAccountDrawer.vue";
import EditUser from "@/pages/myhome/dRootPage/menu/Drawer/EditUser.vue";
import axios from "axios";
import bus from "@/utils/bus"

const columns = [{
    title: '用户名',
    dataIndex: 'name',
    key: 'name',
}, {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
}, {
    title: '注册时间',
    dataIndex: 'joinTime',
    key: 'joinTime',
}, {
    title: '身份标识',
    key: 'tags',
    dataIndex: 'tags',
}, {
    title: 'Action',
    key: 'action',
}];

export default defineComponent({
    components: {
        SmileOutlined,
        newAccountDrawer,
        EditUser
    },
    setup() {
        // 使用 ref 让 data 和 load 变成响应式
        const data = ref([]);
        const load = ref(true);

        const userName = localStorage.getItem("userInfo");
        if(userName === null){
            this.$route.push("/login")
        }

        // 在组件挂载时加载数据
        const fetchData = () => {
            load.value = true;
            axios.post("http://localhost:8000/api/userinfo/", {})
                .then((result) => {
                    let arr = result.data;
                    let newData = arr.map((user, index) => ({
                        key: index + 1,
                        name: user.username,
                        email: user.email,
                        joinTime: user.date_joined,
                        tags: user.is_superuser ? ['管理员'] : ['普通用户'],
                        deleting: false  // 初始化每一行的删除状态为 false
                    })).filter(user => user.name !== userName);
                    data.value = newData;
                    load.value = false;
                })
                .catch((e) => {
                    console.log(e);
                    load.value = false;
                });
        };

        // 初次进入加载数据
        fetchData();

        // 删除用户
        const deleteUser = async (record) => {
            record.deleting = true;  // 开始删除时显示该行的 a-spin
            try {
                await axios.post("http://localhost:8000/api/deleteuser/", { "username": record.name });
                alert("删除成功！");
                fetchData();  // 删除成功后刷新数据
            } catch (e) {
                alert("删除失败！");
                console.log(e);
            } finally {
                record.deleting = false;  // 删除完成后隐藏该行的 a-spin
            }
        };

        return {
            data,
            columns,
            load,
            fetchData,
            deleteUser,
        };
    },
});
</script>

<style>
</style>
